<template>
  <div id="content" ref="content">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "MyContent",
  props: {
    scrollTop: Number,
  },
  watch: {
    scrollTop(now, old) {
      this.$nextTick(() => {
        this.$refs.content.scrollTop = now;
        console.log(this.$refs.content.scrollTop);
      });
    },
  },
  mounted() {
    //计算元素高度
    this.$refs.content.style.height =
      document.documentElement.clientHeight - 54 - 44 + "px";
  },
};
</script>

<style scoped>
#content {
  overflow: scroll;
  margin-top: 44px;
}
</style>
